<template>
  <div>
    <div class="flex align-center table-top-btns">
      <h5 class="flex align-center">
        <svg-icon style="margin-right:15px" icon-class="list" :size="15" />数据列表
      </h5>
      <el-button v-if="$hasMethod('#add')" size="small" class="add-btn" icon="el-icon-plus" @click="openAddDialog()">添加菜单</el-button>
    </div>
    <el-table :data="tableData" row-key="id" border :tree-props="{ children: 'children' }">
      <el-table-column align="center" label="展开" />
      <el-table-column align="center" label="排序" width="80">
        <template slot-scope="scope">
          <!-- onkeyup="value=value.replace(/[^\d]/g,'')" -->
          <span v-if="!$hasMethod('#sort')">{{ scope.row.sort_num }}</span>
          <el-input v-else v-model="scope.row.sort_num" oninput="value=value.replace(/[^\d]/g,'')" maxlength="9" @change="changeSort(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="ID" prop="id" width="80" />
      <el-table-column align="left" label="菜单名称">
        <template slot-scope="scope">
          <p><span v-if="scope.row.pid != 0" style="margin:0 5px 0 20px;">├─</span>{{ scope.row.label }}</p>
        </template>
      </el-table-column>
      <el-table-column align="center" label="控制器" prop="controller" />
      <el-table-column align="center" label="方法" prop="action" />
      <el-table-column align="center" label="路径" prop="path" />
      <el-table-column align="center" label="所属平台" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.type == 1 ? '管理后台' : '供应商后台' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="70" align="center">
        <template slot-scope="scope">
          <el-tag v-if="$hasMethod('#enable')" class="pointer" :type="scope.row.status == 1 ? 'success' : 'danger'" @click="changeStatus(scope.row.id, scope.row.status)">{{ scope.row.status == 1 ? '启用' : '禁用' }}</el-tag>
          <el-tag v-else :type="scope.row.status == 1 ? 'success' : 'danger'">{{ scope.row.status == 1 ? '启用' : '禁用' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="230" fixed="right">
        <template slot-scope="scope">
          <el-button v-if="$hasMethod('#add')" size="mini" type="success" @click="openAddDialog(scope.row.id, 'add')">添加子菜单</el-button>
          <el-button v-if="$hasMethod('#edit')" size="mini" type="primary" @click="openAddDialog(scope.row, 'edit')">编辑</el-button>
          <el-button v-if="$hasMethod('#delete')" size="mini" type="danger" @click="removeItem(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <add-dialog ref="addDialog" :menu-list="tableData" :edit-item="editItem" @getList="getList" />
  </div>
</template>

<script>
import { getMenuList, setMenu, editMenu, delMenu } from '@/api/system'
import addDialog from './add'
export default {
  components: { addDialog },
  data() {
    return {
      tableData: [],
      editItem: null
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 删除
    removeItem(id) {
      this.$confirm('您确定要删除吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        delMenu(id).then(res => {
          this.getList()
        })
      }).catch(() => { })
    },
    // 更改状态
    changeStatus(id, status) {
      let tip = ''
      let title = ''
      if (status === 1) {
        tip = '您确定要禁用吗？'
        title = '禁用'
      } else {
        tip = '您确定要启用吗？'
        title = '启用'
      }
      this.$confirm(tip, title, {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        setMenu({
          id,
          status: status === 1 ? 0 : 1
        }).then(res => {
          this.getList()
        })
      }).catch(() => { })
    },
    // 更改排序
    changeSort(item) {
      const params = {
        id: null,
        pid: null,
        title: '',
        controller: '',
        action: '',
        path: '',
        status: 1,
        type: 1,
        sort_num: 0
      }
      for (const key in params) {
        params[key] = item[key]
      }
      editMenu(params).then(res => {
        this.getList()
      })
    },
    // 添加/编辑菜单
    openAddDialog(val, type) {
      this.editItem = null
      if (type === 'add') {
        this.$refs.addDialog.form.pid = val
      } else if (val) {
        this.editItem = val
      }
      this.$refs.addDialog.dialogVisible = true
    },
    getList() {
      getMenuList().then(res => {
        this.tableData = res || []
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
